<template>
	<view class="wy-modal" >
		<!--#ifndef APP-NVUE -->
		<view :class="[attr.show?'show':'']" class="cu-modal" style="position:fixed;">
			<view class="cu-dialog">
				<view class="cu-bar bg-title justify-end" v-if="attr.title">
					<view class="action">
						 
					</view>
					<view class="content">
						<slot name="title">{{attr.title}}</slot>
					</view>
					<view class="action" @tap="toCancel">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<text v-if="attr.content">{{attr.content}}</text>
					<slot></slot>
				</view> 
				<view class="cu-bar bg-action">
					<slot name="action">
						<view v-if="attr.showCancel" class="action margin-0 flex-sub solid-left" :class="attr.cancelColor?'text-action-active':''" @tap="trigger('cancel')">
						 {{attr.cancelText}}
						</view>
						<view  class="action margin-0 flex-sub solid-left" :class="attr.confirmColor?'text-action-active':''" @tap="trigger('confirm')">
						 {{attr.confirmText}}
						</view>
						<view v-for="(ac,index) in attr.action" :key="index" v-if="ac.show" class="action margin-0 flex-sub solid-left" :class="ac.active?'text-action-active':''" @tap="trigger(ac.tap)">
							{{ac.text}}
						</view>
					</slot>
					
				</view>
			</view>
		</view>
		<!--#endif-->
		<!--#ifdef APP-NVUE -->
		<n-popup boxStyle="" :show="attr.show" :pos="attr.pos" :width="attr.width" :height="attr.height"  @overlayClicked="attr.show=false">
			<view class="cp">
				<view class="cp-token"></view>
				<view class="cp-body n-bg-nav"> 
					<slot name="title">
						<text class="cp-title">{{attr.title}}</text>
					</slot>
					<slot name="content">
						<text class="cp-sign n-color-text">{{attr.content}}</text>
					</slot>
					<view class="cp-action n-flex-row n-ms-top-base n-ms-bottom-base">
						<slot name="action">
							<view v-if="attr.showCancel" class="n-flex-one n-align-center"  @tap="trigger('cancel')">
							 <text :class="attr.cancelColor?'n-color-primary':'n-color-text'">{{attr.cancelText}}</text> 
							</view>
							<view  class="n-flex-one n-align-center"  @tap="trigger('confirm')">
							 <text :class="(attr.confirmColor||(!attr.showCancel&&attr.action.length==0))?'n-color-primary':'n-color-text'">{{attr.confirmText}}</text> 
							</view>
							<view v-for="(ac,index) in attr.action" :key="index" v-if="ac.show" class="n-flex-one n-align-center"  @tap="trigger(ac.tap)">
								<text  :class="ac.active?'n-color-primary':'n-color-text'">{{ac.text}}</text> 
							</view>
						</slot>	
					</view>
				</view>
				
			</view>
		</n-popup>
		<!--#endif-->
	</view>
	
</template>

<script>
	var that;
	var wy;	 
	var pubfn;
	export default {
		data() {
			return {
				actionCount:0,
				attr:{
					pos:'scale-center',
					width:'600rpx',
					height:'660rpx',
					show:false,
					title:'提示',
					content:'',
					showCancel:true,
					cancelText:'取消',
					cancelColor:true,
					confirmText:'确定',
					confirmColor:false,
					success:(e)=>{
						console.log(e)
					},
					action:[],
					event:{
						confirm:(e)=>{
							this.hide()
							if(this.attr.success){
								this.attr.success({confirm:true})
							} 
						},
						cancel:(e)=>{
							this.hide()
							if(this.attr.success){
								this.attr.success({cancel:true})
							} 
							
						}
					},
					theme:{
						main:{
							dfclass:'',
							class:'',
							style:'' 
						}
						
					}
				},
				dfAttr:{
					pos:'scale-center',
					width:'600rpx',
					height:'660rpx',
					show:false,
					title:'提示',
					content:'',
					showCancel:true,
					cancelText:'取消',
					cancelColor:true,
					confirmText:'确定',
					confirmColor:false,
				}
			}
		},
		props: {
			dataSource:{
				type:Object,
				default:()=>{
					return{
					} 
				}
			}
		},
		watch:{
			dataSource:{
				handler(){
					this.init()
				},
				deep:true
			} 
		},
		created() {
			that = this;
			wy = uni.wy;  
			pubfn=wy.pubfn
			this.init()
		}, 
		methods: {
			init(){
				if(this.dataSource){ 
					this.attr=pubfn.deepMerge(this.attr,this.dataSource) 
				}
			},
			trigger(fun) 
			{
				if(this.attr.event.hasOwnProperty(fun)){
					this.attr.event[fun]()
				} 
			}, 
			showModal(obj){
				this.show(obj)
			},
			show(obj) {
				if(obj){
					let {success}=obj
					if(!success){
						obj.success=function(res){}
					}
					obj={
						...this.dfAttr,
						...obj
					}
					this.attr=pubfn.deepMerge(this.attr,obj) 
				} 
				let {showCancel,confirmColor}=this.attr
				if(!showCancel&&!confirmColor){
					this.attr.confirmColor=true
				}
				this.attr.show=true 
			},
			toCancel(){
				this.hide()
				if(this.attr.success){
					this.attr.success({cancel:true})
				} 
			},
			hide() {
				this.attr.show=false
			},
			requireLogin(isLogin=false){
				if(!isLogin){
					this.show({
						title:'提示',
						content:'该操作需要登录,是否立即登录?',
						confirmText:'是',
						cancelText:'否',
						confirmColor:'active',
						cancelColor:'', 
						success:function(res) {
							if(res.confirm){
								var url= wy.vk.getVuex('$app.config.login.url')
								uni.navigateTo({
									url
								})
							}
						}
					})
				} 
				return isLogin
			}
		}
	}
</script>

<style lang="scss" scoped>
.cp {
		position: relative;
		width: 600rpx;
		//height: 660rpx;
		
		&-token {
			height: 60rpx;
		}
		&-body {
			width: 600rpx;
	//		height: 600rpx;
			border-radius: 24rpx;
		//	background-color: #FFFFFF;
			padding-left: 36rpx;
			padding-right: 36rpx;
			flex-direction: column;
			align-items: center; 
			padding-top: 30rpx;
		}
		&-title {
			font-size: 36rpx;
			line-height: 50rpx;
			color: $n-text-color;
			font-weight: 600;
		}
		&-contact {
			margin-top: 16rpx;
			flex-direction: row;
			align-items: center;
		}
		&-item {
			margin-left: 16rpx;
			margin-right: 16rpx;
			flex-direction: row;
			align-items: center;
			
			&-text {
				font-size: 30rpx;
				color: $n-text-color-second;
				line-height: 42rpx;
				margin-left: 12rpx;
				margin-right: 12rpx;
			}
		}
		&-sign {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			font-size: 28rpx;
		//	color: $n-text-color-third;
			line-height: 42rpx;
		}
		&-logo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			position: absolute;
			top: 0;
			left: 300rpx;
			transform: translateX(-50%);
		}
		&-action {
			width: 600rpx;
		}
	} 
</style>
